<template>
    <div class="article-detail">
        <div class="main">
            <div class="floating-elements">
                <!-- 复用列表页的浮动元素 -->
                <div class="floating-square"></div>
                <div class="floating-circle"></div>
                <div class="floating-triangle"></div>
                <div class="floating-cross"></div>
            </div>
            <div class="container">
                <div class="nav-header">
                    <router-link to="/tech" class="back-link">
                        <svg class="back-icon" viewBox="0 0 24 24" width="24" height="24">
                            <path fill="currentColor"
                                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
                        </svg>
                        <span>返回列表</span>
                    </router-link>
                </div>

                <article v-loading="loading" class="article-content cards">
                    <header class="article-header">
                        <h1>{{ article.title }}</h1>
                        <div class="article-meta">
                            <span class="date">{{ article.date }}</span>
                            <span class="author">
                                <svg class="author-icon" viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="currentColor"
                                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
                                </svg>
                                {{ article.author }}
                            </span>
                            <span class="category">{{ article.category }}</span>
                        </div>
                        <div class="tags">
                            <span v-for="tag in article.tags" :key="tag" class="tag">{{ tag }}</span>
                        </div>
                    </header>

                    <div class="article-body">
                        <MdPreview :modelValue="article.content" :theme="theme" />
                    </div>

                    <!-- 添加作者信息和版权声明盒子 -->
                    <div class="article-footer cards">
                        <div class="footer-content">
                            <div class="footer-section copyright-section">
                                <div class="copyright-icon">
                                    <svg viewBox="0 0 24 24" width="24" height="24">
                                        <path fill="currentColor"
                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v-2h-2v2zm0-4h2V7h-2v5z" />
                                    </svg>
                                </div>
                                <div class="copyright-text">
                                    <p>本文由 <strong>{{ article.author }}</strong> 创作，采用
                                        <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">
                                            CC BY-NC-SA 4.0
                                        </a>
                                        许可协议
                                    </p>
                                    <p class="article-link">
                                        本文链接：<a :href="currentUrl" target="_blank">{{ currentUrl }}</a>
                                    </p>
                                </div>
                            </div>
                            <div class="footer-section share-section">
                                <div class="share-text">分享本文</div>
                                <div class="share-buttons">
                                    <button class="share-button" @click="copyLink" title="复制链接">
                                        <svg viewBox="0 0 24 24" width="20" height="20">
                                            <path fill="currentColor"
                                                d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
                                        </svg>
                                    </button>
                                    <button class="share-button" @click="shareToWeibo" title="分享到微博">
                                        <svg viewBox="0 0 24 24" width="20" height="20">
                                            <path fill="currentColor"
                                                d="M20.3 9.6c-.8-2.4-3.2-4.1-5.9-4.1-3.5 0-6.3 2.8-6.3 6.3 0 .7.1 1.4.3 2-2.2-.3-4.3-1.2-6-2.6-1.8-1.5-3.2-3.5-4.1-5.8-.2.3-.3.7-.3 1.1 0 2.2 1.1 4.1 2.8 5.2-.9 0-1.8-.3-2.6-.7v.1c0 3 2.1 5.5 5 6.1-.5.1-1.1.2-1.7.2-.4 0-.8 0-1.2-.1.8 2.5 3.1 4.3 5.8 4.3-2.1 1.7-4.8 2.7-7.7 2.7-.5 0-1 0-1.5-.1C2.7 21 5.9 22 9.3 22c11.3 0 17.5-9.4 17.5-17.5v-.8c1.2-.9 2.2-2 3-3.3-1.1.5-2.3.8-3.5 1z" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>

                <!-- 文章导航 -->
                <div class="article-navigation" v-if="prevArticle || nextArticle">
                    <router-link v-if="prevArticle" :to="`/tech/${prevArticle.id}`" class="nav-link cards prev">
                        <span class="nav-label">上一篇</span>
                        <span class="nav-title">{{ prevArticle.title }}</span>
                    </router-link>
                    <router-link v-if="nextArticle" :to="`/tech/${nextArticle.id}`" class="nav-link cards next">
                        <span class="nav-label">下一篇</span>
                        <span class="nav-title">{{ nextArticle.title }}</span>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/requestLogin'
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/preview.css'
import type { Themes } from 'md-editor-v3'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const theme = ref<Themes>('dark')

interface ArticleDetail {
    id: number
    title: string
    content: string
    category: string
    tags: string[]
    author: string
    status: 'published' | 'draft'
    createTime: string
}

// 格式化后的文章数据
const article = ref({
    id: 0,
    title: '',
    date: '',
    author: '',
    category: '',
    tags: [] as string[],
    content: ''
})

// 上一篇和下一篇文章
const prevArticle = ref<{ id: number; title: string } | null>(null)
const nextArticle = ref<{ id: number; title: string } | null>(null)

// 获取文章详情
const fetchArticleDetail = async (id: string) => {
    loading.value = true
    try {
        const response = await request.get(`http://cylyxsz.w1.luyouxia.net/blog/api/articles/${id}`)

        if (response.code === 200 && response.data) {
            const data: ArticleDetail = response.data

            // 格式化文章数据
            article.value = {
                id: data.id,
                title: data.title,
                date: new Date(data.createTime).toLocaleDateString(),
                author: data.author || '匿名',
                category: data.category,
                tags: data.tags || [],
                content: data.content
            }
        } else {
            ElMessage.error('获取文章详情失败')
            router.push('/tech') // 获取失败时返回列表页
        }
    } catch (error) {
        console.error('获取文章详情失败:', error)
        ElMessage.error('获取文章详情失败')
        router.push('/tech')
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    const articleId = route.params.id as string
    if (articleId) {
        fetchArticleDetail(articleId)
    }
})

const currentUrl = window.location.href

const copyLink = () => {
    navigator.clipboard.writeText(currentUrl)
    ElMessage.success('链接已复制到剪贴板')
}

const shareToWeibo = () => {
    const text = `${article.value.title} - ${currentUrl}`
    const url = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(currentUrl)}&title=${encodeURIComponent(text)}`
    window.open(url, '_blank')
}
</script>

<style scoped>
.article-detail {
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    overflow-y: auto;
}

.main {
    position: relative;
    color: #fff;
    min-height: 100vh;
    padding-bottom: 2rem;
}

.container {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.nav-header {
    margin-bottom: 2rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.05) 100%);
    transition: all 0.3s ease;
}

.back-link:hover {
    transform: translateX(-5px);
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.08) 100%);
}

.article-content {
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.article-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(45deg,
            rgba(91, 37, 195, 0.05) 0%,
            transparent 40%,
            rgba(41, 125, 182, 0.05) 70%,
            transparent 100%);
    animation: gradientMove 15s ease infinite;
    z-index: -1;
}

.article-content::after {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background: radial-gradient(circle at center,
            rgba(255, 255, 255, 0.02) 0%,
            transparent 60%);
    animation: rotate 20s linear infinite;
    z-index: -1;
}

.article-header {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.article-header h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
    position: relative;
    display: inline-block;
}

.article-header h1::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(91, 37, 195, 0.3),
            rgba(41, 125, 182, 0.3));
    transform-origin: left;
    animation: lineWidth 3s ease-in-out infinite;
}

.article-meta {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    opacity: 0.8;
    align-items: center;
}

.author {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.tags {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.tag {
    background: linear-gradient(135deg,
            rgba(91, 37, 195, 0.15) 0%,
            rgba(41, 125, 182, 0.15) 100%);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.article-body {
    font-size: 1.1rem;
    line-height: 1.8;
}

.article-body :deep(.md-preview) {
    background: transparent;
    color: #fff;
}

.article-body :deep(.md-preview-wrapper) {
    padding: 0;
}

.article-body :deep(h1),
.article-body :deep(h2),
.article-body :deep(h3),
.article-body :deep(h4),
.article-body :deep(h5),
.article-body :deep(h6) {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
    margin: 2rem 0 1rem;
}

.article-body :deep(p) {
    color: rgba(255, 255, 255, 0.9);
    margin: 1rem 0;
}

.article-body :deep(code) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

.article-body :deep(pre) {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px;
    padding: 1rem;
}

.article-body :deep(blockquote) {
    border-left: 4px solid rgba(255, 255, 255, 0.2);
    padding-left: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 1rem 0;
}

.article-body :deep(a) {
    color: #409eff;
    text-decoration: none;
}

.article-body :deep(a:hover) {
    text-decoration: underline;
}

.article-body :deep(table) {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}

.article-body :deep(th),
.article-body :deep(td) {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
}

.article-body :deep(th) {
    background: rgba(255, 255, 255, 0.05);
}

.article-body :deep(ul),
.article-body :deep(ol) {
    padding-left: 2rem;
    margin: 1rem 0;
}

.article-body :deep(li) {
    margin: 0.5rem 0;
    color: rgba(255, 255, 255, 0.9);
}

.article-body :deep(img) {
    max-width: 100%;
    border-radius: 8px;
    margin: 1rem 0;
}

.article-body :deep(.hljs) {
    background: transparent !important;
    color: #fff;
}

.article-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
}

.nav-link {
    flex: 1;
    padding: 1.5rem;
    text-decoration: none;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.nav-link:hover {
    transform: translateY(-3px);
}

.nav-label {
    font-size: 0.9rem;
    opacity: 0.7;
}

.nav-title {
    font-size: 1.1rem;
    font-weight: bold;
}

.cards {
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.05) 100%);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 4px 24px -1px rgba(0, 0, 0, 0.2),
        0 0 1px 0 rgba(0, 0, 0, 0.16),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.cards:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 8px 32px -2px rgba(0, 0, 0, 0.25),
        0 0 2px 0 rgba(0, 0, 0, 0.2),
        inset 0 0 32px rgba(255, 255, 255, 0.07);
}

/* 复用列表页的浮动元素样式 */
.floating-elements {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .article-header h1 {
        font-size: 1.8rem;
    }

    .article-meta {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .article-body {
        font-size: 1rem;
    }

    .article-navigation {
        flex-direction: column;
    }

    .nav-link {
        padding: 1rem;
    }
}

/* 动画关键帧 */
@keyframes gradientMove {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(2%, 2%) rotate(1deg);
    }

    50% {
        transform: translate(0, 4%) rotate(0deg);
    }

    75% {
        transform: translate(-2%, 2%) rotate(-1deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes lineWidth {

    0%,
    100% {
        transform: scaleX(1);
        opacity: 0.5;
    }

    50% {
        transform: scaleX(0.8);
        opacity: 0.8;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heightGrow {
    from {
        height: 0;
    }

    to {
        height: 80%;
    }
}

.article-body :deep(.md-editor-dark) {
    --md-bk-color: transparent !important;
    --md-color: #fff !important;
    --md-border-color: rgba(255, 255, 255, 0.1) !important;
}

.article-body :deep(.md-editor-dark pre) {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.article-body :deep(.md-editor-dark code) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.article-body :deep(.md-editor-dark blockquote) {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-left-color: rgba(255, 255, 255, 0.2) !important;
}

/* 代码高亮主题覆盖 */
.article-body :deep(.hljs) {
    background: transparent !important;
}

.article-body :deep(.hljs-keyword),
.article-body :deep(.hljs-function),
.article-body :deep(.hljs-string),
.article-body :deep(.hljs-number),
.article-body :deep(.hljs-literal),
.article-body :deep(.hljs-comment) {
    color: inherit !important;
}

/* 调整预览区域的内边距 */
.article-body :deep(.md-preview-wrapper) {
    padding: 0 !important;
    background: transparent !important;
}

/* 移除预览区域的边框 */
.article-body :deep(.md-preview) {
    border: none !important;
    background: transparent !important;
}

.article-footer {
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.05) 100%);
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer-section {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.copyright-icon {
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.copyright-text {
    flex: 1;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.copyright-text strong {
    color: #fff;
    font-weight: 500;
}

.copyright-text a {
    color: #409eff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.copyright-text a:hover {
    color: #66b1ff;
    text-decoration: underline;
}

.article-link {
    margin-top: 0.5rem;
    word-break: break-all;
    font-size: 0.9rem;
    opacity: 0.8;
}

.share-section {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.share-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
    padding-top: 0.5rem;
}

.share-buttons {
    display: flex;
    gap: 1rem;
    margin-left: auto;
}

.share-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.share-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .article-footer {
        padding: 1.5rem;
    }

    .footer-content {
        gap: 1.5rem;
    }

    .copyright-text {
        font-size: 0.9rem;
    }

    .share-section {
        flex-direction: column;
        gap: 1rem;
    }

    .share-buttons {
        margin-left: 0;
    }
}

.article-body :deep(p) {
    text-indent: 2em;
    line-height: 2.5;
}
</style>